import React from 'react'
import { useNavigate } from 'react-router-dom';
import "./index.css";
import yu1 from "../../assets/9.png"
import yu2 from "../../assets/10.png"
import yu3 from "../../assets/11.png"
import yu4 from "../../assets/12.png"
import yu5 from "../../assets/13.png"
import yu6 from "../../assets/14.png"
import yu7 from "../../assets/15.png"
import yu8 from "../../assets/16.png"
import { CheckShieldOutline } from 'antd-mobile-icons'
const Index: React.FC = () => {
    const navigate = useNavigate();
    const tonayy = () => {
        navigate("/anyiyuan")
    }
    const toaks = () => {
        navigate("/ankeshi")
    }
    const toays = () => {
        navigate("/anyisheng")
    }
    const tonei = () => {
        navigate("/neike")
    }
    const towai = () => {
        navigate("/weike")
    }
    const tonpi = () => {
        navigate("/pifuke")
    }
    const tonnan = () => {
        navigate("/nanke")
    }
    const tonfu = () => {
        navigate("/fuchanke")
    }
    return (
        <div className='wsyy-container'>
            <div className='wsyy-one'>
                <div className="button-group">
                   
                        <div className="checkmark"><CheckShieldOutline /></div>
                        <div className='wsyy-title'>官方号源</div>
                 
                    
                        <div className="checkmark"><CheckShieldOutline /> </div>
                       <div className='wsyy-title'>医生本人</div>
                 
                 
                        <div className="checkmark"><CheckShieldOutline />  </div>
                      <div className='wsyy-title'>平台认证</div>
                 
               
                        <div className="checkmark"><CheckShieldOutline /> </div>
                       <div className='wsyy-title'>诊前退款</div>
              
                </div>
            </div>
            <div className='wsyy-two'>
                <div onClick={tonayy}>
                    <img src={yu1} style={{ width: "3.5rem", height: "3rem" }} alt="" />
                    <h4>按医院</h4>
                    <p>全国知名医院</p>
                </div>
                <div onClick={toaks}>
                    <img src={yu2} style={{ width: "3.6rem", height: "3rem" }} alt="" />
                    <h4>按科室</h4>
                    <p>按科室挂号</p>
                </div>
                <div onClick={toays}>
                    <img src={yu3} style={{ width: "3.5rem", height: "3rem" }} alt="" />
                    <h4>按医生</h4>
                    <p>全国知名专家</p>
                </div>
            </div>
            <div className='wsyy-three'>
                <div onClick={tonei}>
                    <img src={yu4} style={{ width: "2.5rem", height: "2.5rem" }} alt="" />
                    <p>内科</p>
                </div>
                <div onClick={towai}>
                    <img src={yu5} style={{ width: "2.5rem", height: "2.5rem" }} alt="" />
                    <p>外科</p>
                </div>
                <div onClick={tonpi}>
                    <img src={yu6} style={{ width: "2.5rem", height: "2.5rem" }} alt="" />
                    <p>皮肤科</p>
                </div>
                <div onClick={tonnan}>
                    <img src={yu7} style={{ width: "2.5rem", height: "2.5rem" }} alt="" />
                    <p>男科</p>
                </div>
                <div onClick={tonfu}>
                    <img src={yu8} style={{ width: "2.5rem", height: "2.5rem" }} alt="" />
                    <p>妇产科</p>
                </div>
            </div>
        </div>
    )
}

export default Index